<template>
  <div v-loading="loading">
    <table class="table table-sm table-bordered approve-table">
      <colgroup>
        <col width="20%" />
        <col width="30%" />
        <col width="20%" />
        <col width="30%" />
      </colgroup>
      <tbody>
        <tr class="bg-light">
          <td colspan="4" class="text-center py-2">资金池信息</td>
        </tr>
        <tr>
          <td>机构名称</td>
          <td colspan="3">{{ formData.agency_name }}</td>
        </tr>
        <tr>
          <td>合作开始时间</td>
          <td>{{ $utils.dateFormat(formData.coo_start_date, format) }}</td>
          <td>合作结束时间</td>
          <td>{{ $utils.dateFormat(formData.coo_end_date, format) }}</td>
        </tr>
        <tr>
          <td>资金池支付时间</td>
          <td>{{ $utils.dateFormat(formData.pay_time, format) }}</td>
          <td>资金池金额</td>
          <td>{{ formData.capital_funds }}万元</td>
        </tr>
        <tr>
          <td>放大倍数</td>
          <td>{{ formData.multiple }}</td>
          <td>合作金额</td>
          <td>{{ formData.coo_funds }}万元</td>
        </tr>
        <tr>
          <td>备注</td>
          <td colspan="3" class="text-left px-3">{{ formData.remark }}</td>
        </tr>
        <tr>
          <td>资金池附件</td>

          <td colspan="3" class="text-left">
            <div v-for="file in areadyFiles" :key="file.url" class="d-flex">
              <attach-item :attach-data="file"></attach-item>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import AttachItem from '@/bank/components/attach/Item'
import { arrayFromString } from '@vimi/utils-tool'
import { attachAdapter } from '@/bank/components/attach/index'
export default {
  components: { AttachItem },
  props: {
    tableId: String,
  },
  data() {
    return {
      format: 'yyyy-MM-dd',
      loading: false,
      tableName: 'capital_pool_register',
      formData: {},
      areadyFiles: [],
    }
  },
  computed: {},
  watch: {
    tableId: {
      handler: function () {
        this.getData()
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    getData() {
      this.formData = {}
      this.areadyFiles = []
      if (!this.tableId) {
        return
      }
      this.loading = true
      this.$api
        .getDataFromId(this.$serviceName, this.tableName, this.tableId)
        .then(res => {
          this.formData = res?.data || {}
          this.areadyFiles = arrayFromString(this.formData.attachment || '').reduce(
            (prev, curr) => {
              prev.push(
                attachAdapter({
                  attachment: curr,
                })
              )
              return prev
            },
            []
          )
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.file-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dotted #eee;

  &:last-child {
    border-bottom: none;
  }
}
.approve-table {
  text-align: center;
  margin-bottom: 0;
  margin-top: -1px;
  td {
    vertical-align: middle;
  }
}
</style>
